<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title>国政书吧</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            min-height:100vh;

        }
        p{
            margin:0;
            padding:0;
        }
        .full{
            width:100%;
            display: block;
        }

        .fl{
            float: left;
        }
        .fr{
            float: right;
        }


        .foot{
            position: fixed;
            bottom:0;
            width:100%;
            background:white;
            left:0;
            overflow: hidden;
        }

        .foot .total{
            width:10vw;
            display: inline-block;
            float: right;
            margin-top:5px;
            margin-bottom: 5px;
            margin-right:15px;
        }

        .foot .total span,.foot .total img{
            display: block;
            height:25px;
            margin:auto;
            text-align: center;
            text-align: center;
            line-height: 25px;
            color:#F39800;
        }


        .foot .total-comment{

        }

        .text{
            color: rgb(78,78,78);
            padding:20px 0;
            line-height:1.5;
        }


        /*评论*/
        .comment{
            border-top:1px solid rgb(215,215,215);

        }

        .comment .comment-title{
            margin-top:20px;
            height:25px;
            line-height:25px;
            vertical-align: middle;
            padding-left:4vw;
            padding-right:4vw;
        }
        .comment .comment-title img{
            height:100%;
            width:auto;
            float: left;
            margin-right:5px;
        }
        .comment .comment-title span{
            height:100%;
            display: inline-block;
            float: left;
        }

        .comment-list{
            display: flex;
            padding:15px 4vw;
            border-bottom:1px solid rgb(215,215,215);
        }

        .comment-list .head-img{
            width:10vw;
        }

        .comment-list .head-img p{
            width:10vw;
            height:10vw;
            background-size: cover;
            background-position: center;
            border-radius: 50%;

        }

        .comment-info{
            flex: 1;
            margin-left:20px;
        }

        .comment-info .user-name{
            color: #F39800;
        }

        .comment-info .time-info{
            color:#999;
            font-size:0.9rem;
            line-height:1.6rem;
        }
        .comment-info .comment-content{
            color:rgb(78,78,78);
        }

        .add-comment-page{
            display: none;
            position: fixed;
            top:0;
            left:0;
            height:100vh;
            width:100vw;
            background: #fff;
        }

        .add-comment-page .framework{
            width:90%;
            margin:auto;
        }

        .add-comment-page .add-comment-title{
            height:25px;
            margin-top:15px;
            margin-bottom:15px;
        }
        .add-comment-page .add-comment-title span,
        .add-comment-page .add-comment-title img{
            height:100%;
            display: inline-block;
            line-height: 25px;
            float: left;
            margin-right:5px;
        }

        .add-comment-page .nickname{
            height:30px;
            border-radius: 2px;
            margin-top:10px;
        }


        .add-comment-page textarea,
        .add-comment-page .nickname{
            display: block;
            -webkit-appearance: none;
            border:1px solid rgb(215,215,215);
            font-size:1rem;
            color:rgb(78,78,78);
            width:100%;
            padding-left:0;
            padding-right:0;
            text-indent: 10px;
        }

        .add-comment-page .btn{
            text-align: center;
            margin-top:30px;
        }


        .add-comment-page .btn span{
            width:40%;
            line-height:2.5rem;
            text-align: center;
            border:1px solid rgb(215,215,215);
            display: inline-block;
            margin:5%;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            float: left;
            color:#fff;
        }

        .add-comment-page .btn span.cancel{
            background:#aaa;
        }

        .add-comment-page .btn span.sure{
            background:#F39800;

        }






        /*主要内容样式*/
        
        video{
            background: #000;
            width:100%;
            height:auto;
            display: block;
            margin:auto;

        }

        .container{
            padding:20px;
        }

        #author{
            color:#F39800;
            margin-bottom:5px;
        }

        .container p{
            
            line-height: 1.5;
        }

        .container .bookname{
            color:#222;
        }

        .read-number{

            display: block;
            float: right;
            height:100%;
            text-align: center;
            line-height: 20px;
            color:#777;
        }

        .read-number img
        {
            height:12px;
            width:auto;
            margin-right:3px;
        }

    </style>
</head>
<body>
    <video src="{{$videoInfo->FilePath2}}" controls></video>
    
    <div class="container">
        <p>
            <span class="bookname">{{$videoInfo->BookTitle}}</span>
            <span class="read-number"><img src="/images/StudyCenter/read.png">{{$videoInfo->ReadNumber}}</span>
        </p>

        <p id="author">主讲：{{$videoInfo->author}}</p>
        <div>
            <p>简介：{{$videoInfo->BookDesc}}</p>
        </div>
    </div>

    <div style="height:50px;"></div>
    <a class="foot" href="{{asset('downloadpage.html')}}">
        <img class="full" src="{{asset('images/sharepage/share-bottom.jpg')}}">
    </a>

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script>    
    var host        = "{{asset('')}}";
    @if(!is_windows())
        window.onload = function(){

            var title   = "教导读书会——{{$videoInfo->BookTitle}}";
            var link    = host + "home/shareGuozhengVideo?bookId={{$videoInfo->BookID}}";
            var imgUrl  = "{{$videoInfo->FilePath1}}";
            var desc    = "{{$videoInfo->desc}}";
            var groupTitle = title + "\n" + desc ;
            wx.config(<?php echo $weixinJs->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
            wx.ready(function(){
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                wx.onMenuShareTimeline({
                    title: groupTitle, // 分享标题
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    //type:'music',
                    //dataUrl:musicdata,
                    success: function () {
                        // 用户确认分享后执行的回调函数

                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });

                //获取“分享给朋友”按钮点击状态及自定义分享内容接口
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    //type: 'music', // 分享类型,music、video或link，不填默认为link
                    //dataUrl: musicdata, // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        //alert('ok');
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        //alert('faile');
                    }
                });
            });

        }
    @endif
</script>
